//图标
import {
    LockOutlined,
    UserOutlined,
    UsergroupAddOutlined,
    PhoneOutlined
} from '@ant-design/icons';
import React, { Component } from 'react'
import ter from './Register.scss'
//引入axios
import axios from "axios";
const bgm = {
    with: '100vw',
    height: '100vh',
    backgroundSize: '100vw 100vh',

}

export default class Register extends Component {
    constructor() {
        super();
        this.state = {
            account: "",
            nickname: "",
            adminPwd: "",
            tel: "",
            pwd: "",
            isaccount: false,
            isnickname: false,
            isadminPwd: false,
            istel: false,
            ispwd: false,
        }
    }
    //赋值
    changes = (event) => {
        // console.log(event)
        this.setState({
            [event.target.name]: event.target.value,
        })
    }
    //判断用户名-失去焦点
    iaccount = () => {
        let reg = /^\w{6,16}$/;
        let checkaccount = reg.test(this.state.account)
        // console.log(checkaccount)
        if (this.state.account === "" || !checkaccount) {
            this.setState({
                isaccount: true
            })
        } else {
            this.setState({
                isaccount: false
            })
        }
    }
    //判断昵称--失去焦点
    inickname = () => {
        let rega = /^[a-zA-Z0-9_-]{0,10}$/;
        let checknickname = rega.test(this.state.nickname)
        // console.log(checknickname)
        if (this.state.nickname === "" || !checknickname) {
            this.setState({
                isnickname: true
            })
        } else {
            this.setState({
                isnickname: false
            })
        }
    }
    //判断手机号--失去焦点
    itel = () => {
        let regb = /^1[3-9]\d{9}$/;
        let checktel = regb.test(this.state.tel)
        console.log(checktel)
        if (this.state.tel === "" || !checktel) {
            this.setState({
                istel: true
            })
        } else {
            this.setState({
                istel: false
            })
        }
    }
    //判断密码--失去焦点
    ipwd = () => {
        let regc = /^[0-9a-zA-Z]{6,16}$/;
        let checkpwd = regc.test(this.state.pwd)
        if (this.state.pwd === "" || !checkpwd) {
            this.setState({
                ispwd: true
            })
        } else {
            this.setState({
                ispwd: false
            })
        }
    }
    //再次判断密码
    iadminPwd = () => {
        if (this.state.adminPwd !== this.state.pwd || this.state.adminPwd === "") {
            this.setState({
                isadminPwd: true
            })
        } else {
            this.setState({
                isadminPwd: false
            })
        }
    }
    //事件注册
    register = () => {
        let { account, nickname, adminPwd, tel, pwd, isaccount, isnickname, isadminPwd, istel, ispwd } = this.state;
        if (account !== "" && nickname !== "" && adminPwd !== "" && tel !== "" && pwd !== "" && isaccount === false && isnickname === false && isadminPwd === false && istel === false && ispwd === false) {
            const params = new URLSearchParams();
            params.append('account', account);
            params.append('nickname', nickname);
            params.append('adminPwd', pwd);
            params.append('tel', tel);
            axios.post('/store-manage/w2003/admin_sign-up.php', params).then(res => {
                alert(res.data);
                // console.log(res);
                // this.props.setistrue()
            }).catch(err => {
                // console.error(err);
                alert('用户创建失败，请到控制台查看详情！');
            });

        } else {
            alert("请填写完毕在进行注册")
        }
    }
    render() {
        let { account, nickname, adminPwd, tel, pwd, isaccount, isnickname, isadminPwd, istel, ispwd } = this.state;
        return (
            <div className={ter.box}>
                <div style={bgm}>
                    <div className={ter.box1}>
                        <div className={ter.ind}>
                            <div>
                                <label>用户名</label><br />
                                <UserOutlined className={ter.move} />
                                <input type='text' placeholder='只允许输入6-16数字跟字母' name='account' value={account} onChange={this.changes} onBlur={this.iaccount} />
                                {isaccount ? <span className={ter.pan}>用户名格式错误请重新填写</span> : null}
                            </div>
                            <div>
                                <label>昵称</label><br />
                                <UsergroupAddOutlined className={ter.move} />
                                <input type='text' placeholder='输入长度为10以内的任何字符' name='nickname' value={nickname} onChange={this.changes} onBlur={this.inickname} />
                                {isnickname ? <span className={ter.pan}>昵称格式错误请重新填写</span> : null}
                            </div>
                            <div>
                                <label>Tel</label><br />
                                <PhoneOutlined className={ter.move} />
                                <input type='text' placeholder='输入11位数字的号码' name='tel' value={tel} onChange={this.changes} onBlur={this.itel} />
                                {istel ? <span className={ter.pan}>电话名格式错误请重新填写</span> : null}
                            </div>
                            <div>
                                <label>密码</label><br />
                                <LockOutlined className={ter.move} />
                                <input type='password' placeholder='输入6-18个密码可包括下划线的任何字符' name='pwd' value={pwd} onChange={this.changes} onBlur={this.ipwd} />
                                {ispwd ? <span className={ter.pan}>密码格式错误请重新填写</span> : null}
                            </div>
                            <div>
                                <label>再次输入密码</label><br />
                                <LockOutlined className={ter.move} />
                                <input type='password' placeholder='请在次输入密码' name='adminPwd' value={adminPwd} onChange={this.changes} onBlur={this.iadminPwd} />
                                {isadminPwd ? <span className={ter.pan}>两次密码填写不一致请重新输入</span> : null}
                            </div>
                            <p>已经拥有账号？前往<span onClick={() => this.props.btns()}>登录</span>页面</p>
                            <p className={ter.btn} onClick={this.register}>确认注册</p>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
